<template>
	<div class="xuan_school">
		<div class="header">
			   <van-nav-bar
                class="tops"
                title="分类处理"
                style="background: #fff;"
                left-arrow
                        @click-left="onClickLeft"
                />
		</div>
      <!--列表--->
    <van-tabs @click="onClick">
              <!-- 此处遍历数据-->
			    <div  id="list-content">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    finished-text="没有更多了"
                    :immediate-check="immediate"
                    :offset="10"
                  >
                  <div v-show="false">
                    <van-cell-group>
					  <van-field
					    v-model="username"
					    label="垃圾单位"
					    placeholder="请输入您的公司名称"
					  
					  />
					  <van-field
					    v-model="phone"
					    label="垃圾种类"
					    placeholder="请选择垃圾种类"
					   
					  />
					 <div class="danwei">
					 	
					
					  <van-field
					    v-model="sms"
					    center
					    clearable
					    label="垃圾数量">
					    <span slot="button" size="small" type="primary" style="color: #4C9FFDFF;">单位</span>
  					</van-field>
  					 </div>
					  <van-field
					    v-model="phone"
					    label="运输公司"
					    placeholder="请选择运输公司"
					   
					  />
					</van-cell-group>
					<van-button round size="large" type="info">确认提交</van-button>
				</div> 
					  
					  <!--
                      	作者：offline
                      	时间：2019-10-30
                      	描述：取消收集
                      -->
                      
                      <div class="clollect_list" id="quxiao">
                      	 <div class="coll_content">
                      	 	<p style="font-family:PingFang SC;
								font-weight:400;
								color:rgba(51,51,51,1);">餐饮垃圾：10吨</p>
                      	 	<div class="collect_listcontent" style="height:2.6rem;">
                      	 		<p>运输单位：xxx运输公司</p>
                      	 		<p>
                      	 			<van-button plain type="primary">同意</van-button>
                                    <van-button plain type="primary">修改</van-button>
                      	 		</p>
                      	 	</div>
                      	 	
                      	 	<div>
                      	 		<p>
                      	 			<span style="font-family:PingFang SC;
											font-weight:400;
											font-size: 12px;
											margin-right: 3vh;
											color:rgba(153,153,153,1)">2019-08-22</span>
											<van-icon name="clock-o" />
                      	 			<span style="color: #FD9F4CFF;vertical-align: middle;font-size: 13px;display: inline-block;margin-top: 0.1vh;">等待中</span>
                      	 		</p>
                      	 	</div>
                      	 	
                      	 </div>
                      </div>
                      <!--
                      	作者：offline
                      	时间：2019-10-30
                      	描述：重新下单
                      -->
                      
                      <div class="clollect_list" id="coll_chong">
                      	 <div class="coll_content">
                      	 	<p style="font-family:PingFang SC;
								font-weight:400;
								color:rgba(51,51,51,1);">餐饮垃圾：10吨</p>
                      	 	<div class="collect_listcontent" style="height:2.6rem;">
                      	 		<p>运输单位：xxx运输公司</p>
                      	 		<p>
                      	 			<!-- <van-button plain type="primary">重新下单</van-button> -->
                      	 		</p>
                      	 	</div>
                      	 	
                      	 	<div>
                      	 		<p>
                      	 			<span style="font-family:PingFang SC;
											font-weight:400;
											font-size: 12px;
											margin-right: 3vh;
											color:rgba(153,153,153,1)">2019-08-22</span>
											<van-icon name="close" />
                      	 			<span style="color: #FF4242FF;font-size:13px;vertical-align: middle;display: inline-block;margin-top: 0.1vh;">拒绝收集（重量不符）</span>
                      	 		</p>
                      	 	</div>
                      	 	
                      	 </div>
                      </div>
                      
                      
                      
                      <!--
                      	作者：offline
                      	时间：2019-10-30
                      	描述：打印凭证
                      -->
                      <div class="clollect_list" id="dayin">
                      	 <div class="coll_content">
                      	 	<p style="font-family:PingFang SC;
								font-weight:400;
								color:rgba(51,51,51,1);">餐饮垃圾：10吨</p>
                      	 	<div class="collect_listcontent" style="height:2.6rem;">
                      	 		<p>运输单位：xxx运输公司</p>
                      	 		<p>
                      	 			<van-button plain type="primary">打印凭证</van-button>
                      	 		</p>
                      	 	</div>
                      	 	
                      	 	<div>
                      	 		<p>
                      	 			<span style="font-family:PingFang SC;
											font-weight:400;
											font-size: 12px;
											margin-right: 3vh;
											color:rgba(153,153,153,1)">2019-08-22</span>
											<van-icon name="passed" />
                      	 			<span style="font-size:13px;vertical-align: middle;color: #44F8C3FF;display: inline-block;margin-top: 0.1vh;">收集成功</span>
                      	 		</p>
                      	 	</div>
                      	 	
                      	 </div>
                      </div>
                      
                      
                      
                      
                      
                  </van-list>
                  
                </van-pull-refresh>
             </div>
		
    </van-tabs>
  
	</div>

</template>
<script>
    import {formatDate} from '../../utils/filters.js'
// require styles
//import BanVeriFy from '@/components/BanVeriFy';

export default {
	  data(){
		  return{
			  tab_item:[{'name':'分类收集'},{'name':'收集订单'}],
        user:'',
        items:[],
        page:0,
        isLoading:false,
        loading: false,   //是否处于加载状态
        finished: false, //是否已加载完所有数据
        temp_event:0,
        immediate:false,
          tem_content:true
		  }
	  },
    mounted(){
	      const that = this;
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
            //页面初始化的时候执行第一次上门回收方法

            that.temp_event =0;
            that.isLoading = true;
            that.page = 0;
            that.items=[];
            that.getrecovery_order(0);
        }else{
            that.$toast("请登录后查看订单");
        }



    },
    filters:{
        formatDate(time){
            var data = new Date(time);
            return formatDate(data,'yyyy-MM-dd hh:mm');
        },
        formatDate2(time){
            var data = new Date(time);
            return formatDate(data,'MM-dd');
        },
        formatStatus(status){

            if(status=='0' ){
                return "已下单"
            }else if(status=='1'){
                return "已抢单2"
            }else if(status=='2'){
                return "已成功回收"
            }else if(status=='3'){
                return "已拒绝回收"
            }
            return "";
        },


    },
	methods: {
		//订单详情
		Orderdetails(id){
			this.$router.push({
				path:'/orderdelite',
          query:{orderId:id}
			})

		},
      onClick(event) {

          if(event == 0){
              const  that = this;
              if(that.user != null && that.user !=''){
                  that.tem_content = true;
                  that.temp_event =0;
                  that.isLoading = true;
                  that.page = 0;
                  that.items=[];
                  that.getrecovery_order(0);
              }else{
                  that.$toast("请登录后查看订单");
              }
          }else if(event == 1){
              const  that = this;
              if(that.user != null && that.user !=''){
                  that.tem_content = false;
                  that.temp_event =1;
                  that.isLoading = true;
                  that.page = 0;
                  that.items=[];
                  that.getdeliver_order(0);
              }else{
                  that.$toast("请登录后查看订单");
              }

          }

      },
      //上门回收
      getrecovery_order(type){
          const that = this;
          that.$sendRequest('/RecoveryRelivery/getrecovery_order',"aId="+that.user.userId+"&page="+that.page).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.reservationOrders.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.reservationOrders.length;i++){
                      that.items.push(res.data.result.reservationOrders[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
              }

          })
      },
      getdeliver_order(type){
          const that = this;
          that.$sendRequest('/RecoveryRelivery/getdeliver_order',"aId="+that.user.userId+"&page="+that.page).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.DeliverOrders.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.DeliverOrders.length;i++){
                      that.items.push(res.data.result.DeliverOrders[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
              }

          })
      },

	       onClickLeft() {
	          this.$router.back(-1);
		    },
      onRefresh(){
          console.log("下拉刷新");
          const  that = this;
          that.isLoading = true;

          that.page = 0;
          that.items=[];
          if(that.temp_event ==0){
              that.getrecovery_order(0);
          }else if(that.temp_event ==1){
              that.getdeliver_order(0);
          }


      },
      onLoad() {
          console.log("上拉加载");
          console.log(this.finished);
          if(this.items.length != 0){
              this.page = this.page+1;
          }
          if(this.temp_event ==0){
              this.getrecovery_order(1);
          }else if(this.temp_event ==1){
              this.getdeliver_order(1);
          }


      }

		}


    }
</script>
<style scoped="scoped">
	.xuan_school>>> .van-tabs__content{
		margin: 2vw;
		
	}
  .xuan_school>>>.van-tabs__wrap {
        visibility: hidden;
        height: 0;
    }
	
	#quxiao >>> .van-button--plain{
		color: #999999FF;
		border:1px solid #CCCCCCFF;
	}
	.clollect_list{
		background: #FFFFFF;
		padding: 2vh;
		text-align: left;
		margin-bottom: 1vh;
		
	}
    #quxiao >>> .van-button--plain{
		color: #FFFFFF;
		background: #4C9FFDFF;
		border:#4C9FFDFF;
        padding: 0 1.2rem;
        margin-left: 0.4rem;
	}
	#dayin >>> .van-button--plain{
		color: #FFFFFF;
		background: #4C9FFDFF;
		border:#4C9FFDFF;
	}
	#coll_chong>>> .van-button--plain{
		color: #FFFFFF;
		background: #FF4242FF;
	   border:#FF4242FF;
	}
	#dayin >>> .van-icon{
		color: #44F8C3FF;
	}
	.collect_listcontent{
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
	
	.danwei >>> .van-field__control{
		width: 25%;
		vertical-align: middle;
	}
	.xuan_school >>> .van-icon{
		color: #FD9F4CFF;
		vertical-align: middle;
		
	}
	.xuan_school >>> .van-button--large {
	    width: 70%;
	    height: 50px;
	    line-height: 48px;
	    margin-top: 4vh;
    }
	.xuan_school>>> .van-tabs__line{
		background-color: #4C9FFDFF;

	}
	.xuan_school >>> .van-cell{
		padding: 14px 3px !important;
	}
	.xuan_school >>> [class*=van-hairline]::after{
		border-bottom: 0 solid #FFFFFF;
	}
	.Img_sre_contet{
		margin-top: 14vh;
		width: 50%;
		height: 50%;
	}
	.list_header{
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:1vh;
		padding: 3vw;
		height: 1vh;
		display: flex;
		font-size: 13px;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6FF;
	}
	.list_bottom{
		display: flex;
		justify-content: space-between;
	}
	.list_bottom div{
		text-align: center;

	}
	.list_bottom div .span_one{
		font-size:13px;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.list_bottom div .span_two{
		margin-top: 1vh;
		display: inline-block;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		font-size: 13px;
	}
	.xuan_school .van-list{
		background: #F6F6F6FF !important;
	}
	.xuan_school{
		background: #F6F6F6FF !important;
	}
	.xuan_school >>> .van-list{
		background: #F6F6F6FF;
	}
	.list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
    .child_list_item{
    	font-size: 15px;
    	vertical-align: middle;
    }
	.lun_bo{
		height: 24vh;
	}
	.header >>> .van-nav-bar__title{
		color: #000;
	}
	.lun_bo >>>.van-swipe{
		height: 100%;
	}
	.data_picker_color{
		color: #FF4242;
		font-size: 20px;
		margin-left: 2vh;
	}
	.child_list_two{
		color: #999999;
		font-size: 13px;
	}
	.uploader_img{
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	/*.Assen_action{
		padding: 0;
		margin: 2vh;
		display: flex;
		justify-content: space-between;
	}*/
	.Assen_action{
		padding: 0;
		margin: 1.2vh;
	}
	.Assen_action img{
		width: 28vw;

	}
	.Assen_action .suliao_ping{
		display: flex;
		margin-top: 1.5vh;
		justify-content: space-between;

	}
	p{
		margin: 0;
		padding: 0;
	}
	.Assen_action
	.Assen_action p{
		text-align: center;
		text-align: left;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}

	.div_content_Assen{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.Assen_action .p_content_con{
	font-size: 15px;
	text-align: left;
 /* display: flex;*/
  /*justify-content: space-between;*/
	/*margin-top: 1.1vh;*/
}
.Assen_item_one img {
	margin-right: 2vw;
}
.p_Assion_july{

	color: #999999;
	margin-top: 0.5vh !important;
}

.xuan_school{
	background:rgb(246,246,246);
	height: 100vh;
}
.Assen_action{
	  /*padding-top: 3vh;*/
    background: #fff;
    /*padding-bottom: 3vh;*/
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vh;
}
.list_bottom{
	padding: 3vh;
}
.Door_recy{
	height: 15vh;
	background: #FFFFFF;
	text-align: left;
	margin: 1.5vh;
	border-radius: 1vh;
}
.Door_recy_item_one{
	display: flex;
	margin: 2vh;
	height: 5vh;
	line-height: 5vh;
	/*border-bottom: 0.5px solid #999;*/
	justify-content: space-between;
	color: #999999;
	font-size: 13px;
	/*border-bottom: 0.5px solid #CCCCCC;*/
}

.end_content{
	display: flex;
	justify-content: space-around;
	font-size: 15px;

}
.end_time_content{
	display: flex;
	justify-content: space-between;
	color: #999999;
	margin-left: 2vh;
	margin-right: 2vh;


}
.end_time_content div{
	text-align: center;
}


p{
	margin: 0;
	padding: 0;
}

.time_content_iten_one p:nth-child(1){
	color: #000000;
}
.time_content_iten_one p:nth-child(2){
	font-size: 12px;
	margin-top: 1vh;

}





 </style>
